import { LoadingOutlined } from "@ant-design/icons";
import { Spin } from "antd";
import { Suspense, lazy } from "react";
import { RouteObject, useRoutes } from "react-router-dom";

import Login from "../views/Login";
const Home = lazy(() => import("../views/Home")); //主页
const Index = lazy(() => import("../views/Index/index")); //首页
const Fee = lazy(() => import("../views/fee/Fee")); //缴费
const FeeAdd = lazy(() => import("../views/fee/FeeAdd")); //缴费添加
const Userinfo = lazy(() => import("../views/userinfo/Userinfo")); //居民
const UserInfoAdd = lazy(() => import("../views/userinfo/UserInfoAdd")); //居民添加
const Repairs = lazy(() => import("../views/Repairs")); //报修
const Questions = lazy(() => import("../views/questions/Questions")); //投诉
const Staffs = lazy(() => import("../views/Staffs")); //职员
const News = lazy(() => import("../views/News/News")); //公告
const NewsOperate = lazy(() => import("../views/News/NewsOperate")); //公告添加
const Stores = lazy(() => import("../views/stores/Stores")); //门店
const Storesadd = lazy(() => import("../views/stores/Storesadd")); //门店添加
const Advertisement = lazy(() => import("../views/advertisement/Advertisement")); //图片管理
const Building = lazy(() => import("../views/Building")); //楼栋
const House = lazy(() => import("../views/House")); //房间
const Administrator = lazy(() => import("../views/Administrator")); //管理员
const Administratorrole = lazy(() => import("../views/administratorrole/index")); //角色
const antIcon = <LoadingOutlined style={{ fontSize: 100 }} spin />;

const routes: RouteObject[] = [
  {
    path: "/login",
    element: <Login></Login>,
  },
  {
    path: "/home",
    element: (
      <Suspense
        fallback={
          <div>
            <Spin
              indicator={antIcon}
              style={{
                position: "absolute",
                left: "50%",
                top: "50%",
                transform: "translate(-50%,-50%)",
              }}
            />
          </div>
        }
      >
        <Home></Home>
      </Suspense>
    ),
    children: [
      {
        path: "",
        element: (
          <Suspense fallback={<div>loading</div>}>
            <Index />
          </Suspense>
        ),
      },
      {
        path: "fee",
        element: (
          <Suspense fallback={<div>loading</div>}>
            <Fee></Fee>
          </Suspense>
        ),
      },
      {
        path: "userinfo",
        element: (
          <Suspense fallback={<div>loading</div>}>
            <Userinfo></Userinfo>
          </Suspense>
        ),
      },
      {
        path: "repairs",
        element: (
          <Suspense fallback={<div>loading</div>}>
            <Repairs></Repairs>
          </Suspense>
        ),
      },
      {
        path: "questions",
        element: (
          <Suspense fallback={<div>loading</div>}>
            <Questions></Questions>
          </Suspense>
        ),
      },
      {
        path: "staffs",
        element: (
          <Suspense fallback={<div>loading</div>}>
            <Staffs></Staffs>
          </Suspense>
        ),
      },
      {
        path: "news",
        element: (
          <Suspense fallback={<div>loading</div>}>
            <News></News>
          </Suspense>
        ),
      },
      {
        path: "newsOperate",
        element: (
          <Suspense fallback={<div>loading</div>}>
            <NewsOperate></NewsOperate>
          </Suspense>
        ),
      },
      {
        path: "stores",
        element: (
          <Suspense fallback={<div>loading</div>}>
            <Stores></Stores>
          </Suspense>
        ),
      },
      {
        path: "storesadd/:id",
        element: (
          <Suspense fallback={<div>loading</div>}>
            <Storesadd></Storesadd>
          </Suspense>
        ),
      },
      {
        path: "advertisement",
        element: (
          <Suspense fallback={<div>loading</div>}>
            <Advertisement></Advertisement>
          </Suspense>
        ),
      },
      // 楼栋
      {
        path: "building",
        element: (
          <Suspense fallback={<div>loading</div>}>
            <Building></Building>
          </Suspense>
        ),
      },
      {
        path: "house",
        element: (
          <Suspense fallback={<div>loading</div>}>
            <House></House>
          </Suspense>
        ),
      },
      {
        path: "administrator",
        element: (
          <Suspense fallback={<div>loading</div>}>
            <Administrator></Administrator>
          </Suspense>
        ),
      },
      {
        path: "administratorrole",
        element: (
          <Suspense fallback={<div>loading</div>}>
            <Administratorrole></Administratorrole>
          </Suspense>
        ),
      },
      {
        path: "feeadd",
        element: (
          <Suspense fallback={<div>loading</div>}>
            <FeeAdd></FeeAdd>
          </Suspense>
        ),
      },
      {
        path: "userInfoadd",
        element: (
          <Suspense fallback={<div>loading</div>}>
            <UserInfoAdd></UserInfoAdd>
          </Suspense>
        ),
      },
    ],
  },
];

export default () => {
  return useRoutes(routes);
};
